<template>
  <div style="width:100%;height:100%;min-width: 350px;" :id="visite_id"></div>
</template>

<script>
  import echarts from 'echarts';
  export default {
    name: 'visiteVolume',
    props: ['xDataArr', 'yDataArr', 'visite_volume_id', 'xDataTitle', 'Data_series_name'],
    data () {
      return {
        xDataList: [],
        yDataList: [],
        visite_id: '',
        title: '',
        series_name: '',
      };
    },
    created: function () {
      var _this = this;
      _this.xDataList = _this.xDataArr;
      _this.yDataList = _this.yDataArr;
      _this.visite_id = 'id_' + _this.visite_volume_id;
      _this.title = _this.xDataTitle;
      _this.series_name = _this.Data_series_name;

    },
    mounted () {
      var _this = this;
      this.$nextTick(() => {
        var visite_id = _this.visite_id;
        let visiteVolume = echarts.init(document.getElementById(visite_id));

        const option = {
          title: {
            text: _this.title,
            x: 'center',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (data) {
              var str = '';
              if (data.length > 0) {
                var val = data[0].value;
                var show = Number(val * 100).toFixed(2);
                str = data[0].name + '：' + show + '%';
              }
              return str;
            }
          },
          grid: {
            top: '40px',
            left: '10px',
            right: '10px',
            bottom: '30px',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            min: 0,
            max: 1,
            boundaryGap: [0, 0.01]
          },
          xAxis: {
            type: 'category',
            data: _this.xDataList,//['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
            nameTextStyle: {
              color: '#c3c3c3'
            },
            axisLabel: {
              interval: 0,
              //rotate:45,
              margin: 2,
            },
            axisPointer: {
              type: 'shadow'
            }
          },
          series: [
            {
              name: _this.series_name,
              type: 'bar',
              data: _this.yDataList,//[2, 3, 4, 5, 6, 7, 3]
              itemStyle: {
                normal: {
                  //以下为是否显示，显示位置和显示格式的设置了
                  label: {
                    show: true,//显示数字
                    position: 'top',
//                    formatter: "{a}{b} : {c} ({d}%)"
                    formatter: function (data) {
                      var val = data.value;
                      var show = Number(val * 100).toFixed(2);
                      var str = show + '%';
                      return str;
                    }
                  },
                  // 定制显示（按顺序）
                  color: function (params) {
                    var colorList = [
                      '#C62828',
                      '#AD1457',
                      '#6A1B9A',
                      '#283593',
                      '#1565C0',
                      '#0277BD',
                      '#00838F',
                      '#00695C',
                      '#2E7D32',
                      '#558B2F',
                      '#F9A825',
                      '#FF8F00',
                      '#EF6C00',
                      '#D84315'
                    ];
                    return colorList[params.dataIndex]
                  }
                }
              }
            }
          ]
        };

        visiteVolume.setOption(option);

        window.addEventListener('resize', function () {
          visiteVolume.resize();
        });
      });
    }
  };
</script>
